<template>
  <el-dialog title="选择商品" v-model="state.visible" width="800px">
    <!-- <el-table :data="state.tableData" tooltip-effect="dark" ref="multipleTable" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="goodsName" label="商品名">
      </el-table-column>
      <el-table-column label="商品图片">
        <template #default="scope">
          <img style="width: 100px; height: 100px;" :key="scope.row.goodsId"
            :src="$filters.prefix(scope.row.goodsCoverImg)" alt="商品主图">
        </template>
</el-table-column>
<el-table-column prop="sellingPrice" label="页面售价">
</el-table-column>
</el-table> -->
    <el-table :data="state.tableData" tooltip-effect="dark" ref="multipleTable" style="width: 100%"
      highlight-current-row @current-change="handleCurrentChange">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="goodsName" label="商品名">
      </el-table-column>
      <el-table-column label="商品图片">
        <template #default="scope">
          <img style="width: 100px; height: 100px;" :key="scope.row.goodsId"
            :src="$filters.prefix(scope.row.goodsCoverImg)" alt="商品主图">
        </template>
      </el-table-column>
      <el-table-column prop="sellingPrice" label="页面售价">
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination background layout="total,prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]"
      :total="state.total" :page-size="state.pageSize" :current-page="state.currentPage" @current-change="changePage" />
    <div class="btns">
      <el-button type="default" plain @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSelectData">确认</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
const emits = defineEmits(['handleSelect'])
const props = defineProps({

})
const currentRow = ref()
const state = reactive({
  visible: false,
  tableData: [],
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10,// 分页大小
  multipleSelection: [], // 选中项
})
onMounted(() => {
  getGoodList()
})
const changePage = (val) => {
  state.currentPage = val
  getGoodList()
}
const handleCurrentChange = (val) => {
  currentRow.value = val
  console.log(val)
}
const handleSelectData = () => {
  if (currentRow.value) {
    emits("handleSelect", currentRow.value)
    state.visible = false
  } else {
    ElMessage({
      message: '请选择一条数据',
      type: 'warning',
    })
  }
}
const getGoodList = () => {
  state.loading = true
  axios.get('/goods/list', {
    params: {
      pageNumber: state.currentPage,
      pageSize: state.pageSize
    }
  }).then(res => {
    state.tableData = res.list
    state.total = res.totalCount
    state.currentPage = res.currPage
    state.loading = false
    goTop && goTop()
  })
}
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 开启弹窗
const open = (id) => {
  state.visible = true
  if (id) {
    state.id = id
  }
}
// 关闭弹窗
const close = () => {
  state.visible = false
}
defineExpose({ open, close })
</script>

<style scoped>
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>